<template>
	<view class="receiving">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="receiving-main">
			<view class="receiving-ul">
				<view class="receiving-li" v-for="(item,index) in spend" :key="index" >
					<view class="receiving-li-top">
						<view class="receiving-li-top-name"><text>{{item.name}}</text></view>
						<view class="receiving-li-top-phone"><text>{{item.mobile}}</text></view>
						<view class="receiving-li-top-moren" v-if="item.addressState==1">默认</view>			
					</view>
					<view class="receiving-li-bottom">
						<view class="receiving-li-bottom-ress">{{item.addressArea}}{{item.addressDetail}}</view>
						<image @click="editBtn(item)" class="receiving-li-bottom-edit"  src="@/static/img/edit-icon.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="receiving-footer">
			<view class="receiving-btn" @click="toLink('/pages/newAddres/newAddres?type=1')">
				<view class="receiving-btn-news" ><text>新增地址</text></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'收货地址',
				spend:[],
			};
		},
		// 页面加载出来就执行
		onShow() {
			this.getList()
		},
		// 下拉触发
		onPullDownRefresh(){
			this.getList();
		},
		methods: {
			getList(){
				this.$api.getAddress().then(res => {
					console.log(res)
					uni.stopPullDownRefresh();
					if(res.code == 200){
						this.spend = res.data.addressList
					}
				})
			},
			toLink(link) {
				if (link) {
					uni.navigateTo({
						url:link
					})
				}
			},
			editBtn(e){
				console.log(e);
				uni.navigateTo({
					url:`/pages/newAddres/newAddres?type=2&addressId=${e.addressId}`
				})
			}
		},
	}
</script>

<style lang="less">
	.receiving{
		width: 100%;
		min-height: 100vh;
		background: #16181D;
		display: flow-root;
	}
	.receiving-main{
		width: 100%;
		min-height: 100vh;
		padding-bottom: 128rpx;
		.receiving-ul{
			margin: 0 auto;
			width: 100%;
			padding: 0 48rpx;
			box-sizing: border-box;
			.receiving-li{
				padding:28rpx 0 32rpx 0;
				width: 100%;
				border-bottom: 1px solid #262A34;
				.receiving-li-top{
					margin-bottom: 16rpx;
					display: flex;
					width: 100%;
					height: 48rpx;
					.receiving-li-top-name{
						width: 108rpx;
						height: 48rpx;
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC,'微软雅黑';
						font-weight: 500;
						color: #FFFFFF;
						line-height: 48rpx;
					}
					.receiving-li-top-phone{
						width: 180rpx;
						height: 48rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #5D5F7A;
						line-height: 48rpx;
						margin: 0 32rpx 0 32rpx;
					}
					.receiving-li-top-moren{
						width: 88rpx;
						height: 48rpx;
						text-align: center;
						line-height: 48rpx;
						background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
						border-radius: 13px;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC ,'微软雅黑';
						font-weight: 400;
						color: #FFFFFF;
					}
				}
				.receiving-li-bottom{
					width: 100%;
					display: flex;
					justify-content: space-between;
					.receiving-li-bottom-ress{
						width: 532rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC,'微软雅黑';
						font-weight: 400;
						color: #FFFFFF;
						line-height: 40rpx;
					}
					.receiving-li-bottom-edit{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
	
	.receiving-footer{
		width: 100%;
		height: 128rpx;
		background-color: #16181D;
		position: fixed;
		bottom: 0rpx;
		left: 0;
	}
	.receiving-btn{
		width: 686rpx;
		height: 88rpx;
		margin: 0 auto 0;
		.receiving-btn-news{
			width: 686rpx;
			height: 88rpx;
			background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
			border-radius: 23px;
			text-align: center;
			line-height: 88rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>
